import React from 'react';
import './index.css';

export default function Playground() {
  let box = [
    { x: 100, y: 100 },
    { x: 300, y: 100 },
  ]

  let line = [
    { x: 100, y: 100 },
    { x: 300, y: 100 },
  ]

  // 0: unlink 1:linking 2:linked
  let state = 0;

  const setState = (val) => {
    state = val;
    let lineNode = document.querySelector('#line')
    if (state == 0) {
      lineNode.style.display = 'none'
    }
    else {
      lineNode.style.display = 'block'
    }
  }

  let target = null;
  let start = null;

  let mousePos = [0,0]

  const mouseDown = (event) => {
    event.persist()
    mousePos = [event.clientX, event.clientY]
    if (event.target.id === 'box1') {
      target = event.target
    }
    else if (event.target.id === 'box2') {
      target = event.target
    }
    else if (event.target.id === 'handle1') {
      start = 'handle1'
      setState(1);
    }
    else if (event.target.id === 'handle2') {
      start = 'handle2'
      setState(1);
    }
  }

  const drawLine = (event) => {

    let radius = 5;

    let lineNode = document.querySelector('#line');
    let box1 = document.querySelector('#box1');
    let box2 = document.querySelector('#box2');

    let x1 = 0;
    let y1 = 0;
    let x2 = 0;
    let y2 = 0;

    // linked
    if (state == 2) {
      console.log('state 2')
      x1 = box1.style.left;
      y1 = box1.style.top;
      x2 = box2.style.left;
      y2 = box2.style.top; 
    }
    else if (state == 1) {
      if (start == 'handle1') {
        x1 = box1.style.left;
        y1 = box1.style.top;
      }
      else {
        x1 = box2.style.left;
        y1 = box2.style.top;
      }
      
      console.log('state 1')
      x2 = event.clientX;
      y2 = event.clientY;
    }
    

    let dx = parseInt(x2) - parseInt(x1);
    let dy = parseInt(y2) - parseInt(y1);
    
    let len = Math.sqrt(dx**2+dy**2) + radius * 2
    let deg = Math.atan2(dy,dx)

    lineNode.style.left = x1;
    lineNode.style.top = y1;
    lineNode.style.width = `${len}px`
    lineNode.style.transform = `translate(${-radius}px, ${-radius}px) rotate(${deg.toFixed(2)}rad)`
  }

  const drawBox = (event) => {
    if (!target) {
      return
    }
    // console.log('moving')
    // console.log(target)
    event.persist()
    let diffX = event.clientX - mousePos[0];
    let diffY = event.clientY - mousePos[1];

    let targetX = parseInt(target.style.left)
    let targetY = parseInt(target.style.top)

    target.style.left = `${targetX + diffX}px`
    target.style.top = `${targetY + diffY}px`
    
    mousePos = [event.clientX, event.clientY]
  }


  
  const mouseMove = (event) => {
    drawBox(event)
    drawLine(event)
  }

  const mouseUp = (event) => {
    target = null;
    if (state == 1) {
      let endNode = null;
      if (start == 'handle1') {
        endNode = document.querySelector('#box2');
      }
      else {
        endNode = document.querySelector('#box1');
      }
      
      let rect = endNode.getBoundingClientRect();
      if (event.clientX > rect.x &&
          event.clientX < rect.x + rect.width &&
          event.clientY > rect.y &&
          event.clientY < rect.y + rect.height)
      {
        setState(2)
      }
      else {
        setState(0)
      }
    }
  }

  setTimeout(() => {
    let h = document.body.clientHeight;
    let w = document.body.clientWidth;
    let n = document.querySelector('#box1');
    n.style.top = `${parseInt(h * 0.25)}px`;
    n.style.left = `${parseInt(w * 0.25)}px`;
    n = document.querySelector('#box2');
    n.style.top = `${parseInt(h * 0.25)}px`;
    n.style.left = `${parseInt(w * 0.75)}px`;
  }, 100)

  return (
    <div className="root" onMouseDown={mouseDown} onMouseMove={mouseMove} onMouseUp={mouseUp}>
      <div id="box1" className="box" style={{top: '100px', left: '100px'}}>
        <div id="handle1" className="handle"></div>
      </div>
      <div id="box2" className="box" style={{top: '100px', left: '300px'}}>
        <div id="handle2" className="handle"></div>
      </div>
      <div id="line" onClick={() => {setState(0)}}></div>
      <div className="hint">
        使用鼠标拖动盒子可以移动<br></br>
        拖动白色圆点进行连线<br></br>
        点击线段取消连接
      </div>
    </div>
  );
}
